@page "/pivot-table/grouping-bar"

@using Syncfusion.Blazor.PivotView
@using Syncfusion.Blazor.Buttons
@inherits SampleBaseComponent;
@using BlazorDemos
@using ej2_blazor_productdetails

<SampleDescription>
    <p>This sample demonstrates grouping feature of the pivot table. The grouping bar is automatically populated from the bound report, and fields can be dragged and dropped to alter the report at runtime. The fields can be sorted, filtered, added and removed dynamically as well.</p>
</SampleDescription>
<ActionDescription>
   <p>The pivot table grouping bar option automatically populates fields from the bound data source and allows end
      users to drag fields between different axes such as columns, rows, values, and filters, and create pivot table at runtime.
      To enable grouping bar, set the <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_ShowGroupingBar'>ShowGroupingBar</a></code> property in <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html'>SfPivotView</a></code> to class <b>true</b>.</p>
    <p>Filter and sort icons allow displaying selective records and ordering them in ascending or descending order. The
        value type icon allows to display values based on selected aggregate type. The remove icon allows the user to remove the field from the report.</p>
    <p>The fields panel, which is located above the grouping bar, displays the fields that are available in the data source but are not bound in the report. The fields can be dragged and dropped into the appropriate axis. In addition, any field removed from any axes will be automatically added to the fields panel. The fields panel can be displayed by setting the <code>ShowFieldsPanel</code> property in the <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewGroupingBarSettings.html'>PivotViewGroupingBarSettings</a></code> to **true**.</p>
    <p>We can also hide the sort, filter, remove and value type icon in the <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewGroupingBarSettings.html'>PivotViewGroupingBarSettings</a></code> class by setting the <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewGroupingBarSettings.html#Syncfusion_Blazor_PivotView_PivotViewGroupingBarSettings_ShowSortIcon'>ShowSortIcon</a></code>, <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewGroupingBarSettings.html#Syncfusion_Blazor_PivotView_PivotViewGroupingBarSettings_ShowFilterIcon'>ShowFilterIcon</a></code>, <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewGroupingBarSettings.html#Syncfusion_Blazor_PivotView_PivotViewGroupingBarSettings_ShowRemoveIcon'>ShowRemoveIcon</a></code> and <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewGroupingBarSettings.html#Syncfusion_Blazor_PivotView_PivotViewGroupingBarSettings_ShowValueTypeIcon'>ShowValueTypeIcon</a></code> properties to <b>false</b>.</p>
   <p>More information on the grouping bar feature can be found in this <a target='_blank' href='https://blazor.syncfusion.com/documentation/pivot-table/grouping-bar/'>documentation section</a>.</p>
</ActionDescription>

<div class="col-lg-9 control-section sb-property-border">
    <div class="content-wrapper">
        <SfPivotView TValue="PivotProductDetails" Height="450" Width="100%" ShowGroupingBar=true EnableValueSorting=true ShowTooltip=false>
            <PivotViewDataSourceSettings DataSource="@Data" ExpandAll=false EnableSorting=true>
                <PivotViewColumns>
                    <PivotViewColumn Name="Year"></PivotViewColumn>
                    <PivotViewColumn Name="Order_Source" Caption="Order Source"></PivotViewColumn>
                </PivotViewColumns>
                <PivotViewRows>
                    <PivotViewRow Name="Country"></PivotViewRow>
                    <PivotViewRow Name="Products"></PivotViewRow>
                </PivotViewRows>
                <PivotViewValues>
                    <PivotViewValue Name="Sold" Caption="Units Sold"></PivotViewValue>
                    <PivotViewValue Name="Amount" Caption="Sold Amount"></PivotViewValue>
                </PivotViewValues>
                <PivotViewFormatSettings>
                    <PivotViewFormatSetting Name="Amount" Format="C0" UseGrouping=true></PivotViewFormatSetting>
                </PivotViewFormatSettings>
            </PivotViewDataSourceSettings>
            <PivotViewGridSettings ColumnWidth="120"></PivotViewGridSettings>
            <PivotViewGroupingBarSettings ShowFilterIcon="@ShowFilter" ShowSortIcon="@ShowSort" ShowRemoveIcon="@ShowRemove" ShowFieldsPanel=true ShowValueTypeIcon="@ShowValueType"></PivotViewGroupingBarSettings>
        </SfPivotView>
    </div>
</div>
<div class="col-lg-3 property-section">
    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<br>
    <div class="property-panel-section">
        <div class="property-panel-header" style="padding-bottom:5px; font-size:16px">Properties</div>
        <div class="property-panel-content">
            <table id="property" style="width: 100%;height:100%;" class="property-panel-table">
                <tbody>
                    <tr style="height: 40px">
                        <td>
                            <div>
                                <SfCheckBox @bind-Checked="@ShowFilter" Label="Show Filter Icon"></SfCheckBox>
                            </div>
                        </td>
                    </tr>
                    <tr style="height: 40px">
                        <td>
                            <div>
                                <SfCheckBox @bind-Checked="@ShowSort" Label="Show Sort Icon"></SfCheckBox>
                            </div>
                        </td>
                    </tr>
                    <tr style="height: 40px">
                        <td>
                            <div>
                                <SfCheckBox @bind-Checked="@ShowValueType" Label="Show Value Type Icon"></SfCheckBox>

                            </div>
                        </td>
                    </tr>
                    <tr style="height: 40px">
                        <td>
                            <div>
                                <SfCheckBox @bind-Checked="@ShowRemove" Label="Show Remove Icon"></SfCheckBox>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
<style>
    .e-pivotview {
        min-height: 200px;
    }

    @@media only screen and (max-width: 400px) {
        #pivot-table-section {
            overflow: auto;
        }
    }

    html, body {
        height: 100%;
    }
</style>

@code{

    public bool ShowFilter = true;
    public bool ShowSort = true;
    public bool ShowRemove = true;
    public bool ShowValueType = true;

    public List<PivotProductDetails> Data { get; set; }

    protected override void OnInitialized()
    {
        this.Data = PivotProductDetails.GetProductData();
    }
}